<template>
  <div id="building">
    <div id="limit">
      楼栋名：
      <el-input class="magin-right" placeholder="请输入楼栋关键字" v-model="name" clearable></el-input>
      性别：
      <el-select class="magin-right" v-model="gender" clearable placeholder="请选择性别">
        <el-option
          v-for="gender in genderOptions"
          :key="gender.value"
          :label="gender.label"
          :value="gender.value">
        </el-option>
      </el-select>
      <el-button type="primary" round @click="getBuilding">查询</el-button>
      <el-button type="success" round @click="addBuildingDialogVisible = true">新增</el-button>
    </div>
    <div id="table" class="magin-top">
      <el-table :data="buildingList" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="楼栋名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template slot-scope="scope">
            <span v-if="scope.row.gender===0">男</span>
            <span v-else-if="scope.row.gender===1">女</span>
          </template>
        </el-table-column>
        <el-table-column label="宿舍管理员" prop="master" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-row>
        <el-col :span="1" :offset="15">
          <el-pagination
            background
            :page-size="pageSize"
            :page-sizes="[5,10,15,20]"
            :current-page="pageNow"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div id="dialog">
      <div id="dialog-add">
        <el-dialog title="新增" :visible.sync="addBuildingDialogVisible" width="300px" :before-close="closeDialog">
          <el-form :model="buildingForm" ref="buildingForm" label-width="75px" label-position="left">
            <el-form-item label="楼栋名称" prop="name">
              <el-input v-model="buildingForm.name" placeholder="请输入楼栋名称" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="75px" prop="gender">
              <el-select v-model="buildingForm.gender" placeholder="请选择性别" style="width: 180px">
                <el-option label="男" value=0></el-option>
                <el-option label="女" value=1></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="addBuilding">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div id="updateBuildingDialog">
        <update-building-dialog :update-building-dialog-visible="updateBuildingDialogVisible"
                                :updatebuilding-form="updatebuildingForm"></update-building-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import building from '@/api/dormitory/building'
  import UpdateBuildingDialog from './updateBuildingDialog'

  export default {
    name: 'building',
    components: {UpdateBuildingDialog},
    data() {
      return {
        name: '',
        gender: '',
        pageSize: 5,
        pageNow: 1,
        total: 0,
        addBuildingDialogVisible: false,
        updateBuildingDialogVisible: false,
        genderOptions: [
          {
            label: '男孩',
            value: 0
          },
          {
            label: '女孩',
            value: 1
          }
        ],
        buildingList: [],
        buildingForm: {},
        updatebuildingForm: {}
      }
    },
    created() {
      this.getBuilding()
    },
    methods: {
      /*获取楼栋*/
      getBuilding() {
        let buildingParams = {
          pageNow: this.pageNow,
          pageSize: this.pageSize
        }
        if (this.gender === 0 || this.gender === 1) {
          this.$set(buildingParams, 'gender', this.gender)
        }
        if (this.name.length > 0) {
          this.$set(buildingParams, 'name', this.name)
        }
        building.getBuilding(buildingParams).then(res => {
          this.buildingList = res.data
          this.total = res.total
        })
      },
      /*改变页面大小*/
      handlePageSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getBuilding()
      },
      /*改变当前页*/
      handlePageCurrentChange(pageNow) {
        this.pageNow = pageNow
        this.getBuilding()
      },
      /*新增*/
      addBuilding() {
        this.$refs["buildingForm"].validate(valid => {
          if (valid){
            building.addBuilding(this.buildingForm).then(() => {
              this.$message.success('添加成功')
              this.closeDialog()
              this.getBuilding()
            })
          }else {
            this.$message.error("请正确填写信息")
          }
        })
      },
      /*编辑*/
      handleEdit(row) {
        this.updateBuildingDialogVisible = true
        this.updatebuildingForm = row
      },
      /*删除*/
      handleDelete(id) {
        this.$confirm('确定删除该楼栋么？删除后不可恢复', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          new Promise((resolve, reject) => {
            building.delBuilding(id).then(() => {
              this.$message.success('删除成功')
              this.getBuilding()
              resolve()
            }).catch(erro => {
              reject(erro)
            })
          })
        })
      },
      /*关闭dialog*/
      closeDialog() {
        this.$refs['buildingForm'].resetFields()
        this.addBuildingDialogVisible = false
        this.updateBuildingDialogVisible = false
      }
    }
  }
</script>

<style scoped>
  #limit {
    margin-left: 20px;
  }

  #building {
    margin-top: 20px;
  }

  .magin-right {
    margin-right: 20px;
    width: 200px;
  }

  .magin-top {
    margin-top: 20px;
  }

  #table {
    margin-left: 20px;
  }
</style>
